<template>
    <div class="repnnrq">
        <div class="ph">
            <a href="#">
                <img src="https://image.10street.cn/image/41/a3/41a3a1126d5ef18c1cd1fb45482ece9c.jpg" alt>
            </a>
        </div>
        <ul>
            <li v-for="data in repnnrq_data.itemData" :key ='data.commonId' v-on:click='todetail(data.commonId)'>
                <div class="shopph">
                    <img
                        :src="data.imageUrl"
                        alt
                    >
                    <p>新品上市</p>
                </div>
                <div class="shopxx">
                    <div class="shopname">
                        {{data.goodsName}}
                    </div>
                    <div class="shopprice">
                        <span> ￥{{data.goodsPrice}}</span>
                        <div>
                            会员价：
                            <em>
                                ￥
                                <i>{{data.vipPrice}}</i>
                            </em>
                        </div>
                    </div>
                </div>
            </li>
        </ul>   
    </div>
</template>


<script>
export default {
    methods: {
        todetail(index){
            this.$emit('commonId',index)
        }
    },
    props:['repnnrq_data'],
    data(){
        return {
            foods : {}
        }
    },
    watch:{
        'repnnrq_data'(){

            // console.log(this.repnnrq_data)
        }
    },
    mounted () {
        
        // console.log(1)
  
        // console.log(this.repeatstyle_data)
    }

}
</script>

<style lang="stylus">
.repnnrq
    overflow hidden
    .ph 
        height 1.5rem
        img 
            width 100%
    ul 
        display flex
        flex-wrap  nowrap
        overflow scroll
        margin-left: 0.1rem;
        li 
            background #fff
            width: 31%;
            margin-right: 2%;
            .shopph 
                height 1.21rem
                position: relative;
                img 
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                p   
                    width: 1.13rem;
                    height 0.15rem
                    text-align center
                    font-size 0.14rem
                    color #ffffff
                    background #FF4E44
                    position: absolute;
                    bottom 0.0333rem
                    line-height: 0.15rem;
            .shopxx
                width 1.13rem
                height  0.63rem  
                padding-left 0.1rem 
                padding-right 0.1rem 
                .shopname
                    font-size: 0.1rem;
                    color: #333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                .shopprice
                    span 
                        color: #333;
                        font-size: 0.07rem;
                        display: block;
                    div
                        color: #333;
                        font-size: 0.07rem;
                        overflow: hidden;
                        word-break: break-all;
                        em
                            color: red;

</style>

